<template>
	<view class="main">
		<shop-nav title="商城首页" :back="false"></shop-nav>
		<view class="swiper">
			<!-- 轮播图 -->
			<u-swiper :list="list5" @change="e => current = e.current" :autoplay="false" height="200">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<!-- 搜索栏 -->
			<view class="search">
				<view class="search_body">
					<!-- 当点击按钮时添加css样式，触发移动动画,从圆点变成圆角框 -->
					<!-- logo -->
					<view class="search_logo">
						<u-icon name="search" color="#3c9cff" size="30" @click="toggleSearch"></u-icon>
					</view>
					<!-- 输入框 -->
					<input type="text" v-model="searchInput" @search="handelSearch" class="search_input"
						:class="isSearchShow ? 'show' : 'hidden'">
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 小菜单 -->
			<view class="main-menu">
				<view class="menu-grid">
					<view class="menu-grid-item col-xl-6" v-for="(item,index) in gridList">
						<view class="item-view" @click="gridClick(index)">
							<!-- 图标 -->
							<u-icon :name="item.name" color="#0f172a" size="28"></u-icon>
							<!-- 菜单文字 -->
							<span>{{item.title}}</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 流式列表 -->
			<view class="waterfall">
				<view class="waterfall-column" v-for="(item, index) in columnList" :key="index" ref="column">
					<view class="waterfall-item" v-for="(pItem, pIndex) in item" :key="pIndex" @click="toGoods(pItem)">
						<view class="waterfall-goods">
							<image :src="pItem.url" mode="widthFix"></image>
							<view class="waterfall-goods-item">
								<span class="title">{{pItem.title}}</span>
								<p class="desc">{{pItem.desc | truncateText}}</p>
								<h4 class="price">{{pItem.price}}</h4>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="more-btn">
				<u-button type="success" size="large" text="查看更多"></u-button>
			</view>
		</view>

		<shop-bar></shop-bar>
	</view>
</template>

<script>
	export default {
		filters: {
			truncateText(value) {
				if (value.length > 28) { // 如果文字超过24个字符
					return value.slice(0, 27) + '...'; // 返回前21个字符及省略号
				} else {
					return value; // 否则直接返回原始值
				}
			}
		},
		data() {
			return {
				columnList: [], // 每列图片
				columnHeight: [], // 每列图片高度
				columnCount: 2, // 总列数
				// 搜索框
				searchInput: '',
				// 显示隐藏
				isSearchShow: false,
				// 轮播图
				list5: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				// 宫格
				gridList: [
					{ name: 'account-fill', title: '门票' },
					{ name: 'bag-fill', title: '周边' }
				],
				// 数据存放
				goodsList: [{
						// 名字
						title: '扇子',
						desc: '用来纳凉，冬凉夏暖特别好使！',
						// 价格
						price: 12,
						// 图片素材
						url: '../../../static/waterfall/1.jpg',
					}, {
						// 名字
						title: '礼盒',
						desc: '只卖盒子，里面的东西不要考虑嗷！',
						// 价格
						price: 84,
						// 图片素材
						url: '../../../static/waterfall/2.jpg',
					}, {
						// 名字
						title: '礼服',
						desc: '网图偷的，注：照片100%于实物不符',
						// 价格
						price: 82,
						// 图片素材
						url: '../../../static/waterfall/3.jpg',
					}, {
						// 名字
						title: '佛跳墙',
						desc: '聚春园特产佛跳墙，精选1000%好料制作，物美价廉~',
						// 价格
						price: 168,
						// 图片素材
						url: '../../../static/waterfall/4.jpg',
					},
					{
						// 名字
						title: '光饼',
						desc: '常用高炉烤制，传统焙饼的炉立于木架之上，砖块砌底，再用开一炉门大小口子的大陶缸倒置其上加工而成。焙饼时把饼坯贴在炉内壁左、右面及顶上，炭火猛烤至饼将熟时',
						// 价格
						price: 20,
						// 图片素材
						url: '../../../static/waterfall/5.jpg',
					},
					{
						// 名字
						title: '老鼠干',
						desc: '宁化人嗜食老鼠干，抓住老鼠，或架于锅中热水蒸，或放入柴灰里烘烤去毛，在将其开膛破肚清除内脏，最后用谷物、米糠熏烤。',
						// 价格
						price: 34,
						// 图片素材
						url: '../../../static/waterfall/6.jpg',
					}, {
						// 名字
						title: '扇子',
						desc: '用来纳凉，冬凉夏暖特别好使！',
						// 价格
						price: 12,
						// 图片素材
						url: '../../../static/waterfall/1.jpg',
					}, {
						// 名字
						title: '礼盒',
						desc: '只卖盒子，里面的东西不要考虑嗷！',
						// 价格
						price: 84,
						// 图片素材
						url: '../../../static/waterfall/2.jpg',
					}, {
						// 名字
						title: '礼服',
						desc: '网图偷的，注：照片100%于实物不符',
						// 价格
						price: 82,
						// 图片素材
						url: '../../../static/waterfall/3.jpg',
					}, {
						// 名字
						title: '佛跳墙',
						desc: '聚春园特产佛跳墙，精选1000%好料制作，物美价廉~',
						// 价格
						price: 168,
						// 图片素材
						url: '../../../static/waterfall/4.jpg',
					},
					{
						// 名字
						title: '光饼',
						desc: '常用高炉烤制，传统焙饼的炉立于木架之上，砖块砌底，再用开一炉门大小口子的大陶缸倒置其上加工而成。焙饼时把饼坯贴在炉内壁左、右面及顶上，炭火猛烤至饼将熟时',
						// 价格
						price: 20,
						// 图片素材
						url: '../../../static/waterfall/5.jpg',
					},
					{
						// 名字
						title: '老鼠干',
						desc: '宁化人嗜食老鼠干，抓住老鼠，或架于锅中热水蒸，或放入柴灰里烘烤去毛，在将其开膛破肚清除内脏，最后用谷物、米糠熏烤。',
						// 价格
						price: 34,
						// 图片素材
						url: '../../../static/waterfall/6.jpg',
					},
				]
			}
		},
		methods: {
			toggleSearch() {
				// 显示搜索框
				this.isSearchShow = !this.isSearchShow;
			},
			handelSearch() {
				console.log(`回车键，手机键盘右下角的"搜索"键：`);
			},
			// 初始化瀑布流
			initData() {
				for (var i = 0; i < this.columnCount; i++) {
					this.columnList.push([]);
					this.columnHeight.push(0);
				}
				this.setWaterfallLayout();
			},
			// 设置瀑布流布局
			async setWaterfallLayout() {
				console.log(" 获取图片素材");
				for (var i = 0; i < this.goodsList.length; i++) {
					let item = this.goodsList[i];
					try {
						let imgInfo = await uni.getImageInfo({
								src: item.url,
							}),
							h = imgInfo.height;
						for (let j = 0; j < this.columnCount - 1; j++) {
							let prevIndex = j,
								nextIndex = j + 1;
							if (
								this.columnHeight[prevIndex] <= this.columnHeight[nextIndex]
							) {
								this.columnList[prevIndex].push(item);
								this.columnHeight[prevIndex] += h;
								console.log(this.columnList[prevIndex]);
							} else {
								this.columnList[nextIndex].push(item);
								this.columnHeight[nextIndex] += h;
								console.log(this.columnList[nextIndex]);
							}
						}
					} catch (error) {
						console.log(error);
					}
				}
			},
			// 去商品详情页面
			toGoods(item) {
				console.log(item);
				var myGoodsData = JSON.stringify(item);
				console.log(myGoodsData);
				uni.navigateTo({
					url: '../goods/item?goods=' + myGoodsData
				})
			},

		},
		beforeMount() {
			this.initData();
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		position: relative;

		.search {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			overflow: hidden;

			.search_body {
				position: relative;
				overflow: hidden;
				border-radius: 35px;

				.search_logo {
					position: absolute;
					z-index: 999;
					background: var(--white);
					right: 0;
					width: 35px;
					height: 35px;
					padding: 2px;
					box-sizing: border-box;
					border-radius: 50%;
				}

				.search_input {
					// float: left;
					margin-right: 20px;
					height: 35px;
					width: 150px;
					background: var(--white);
					border-radius: 35px 0 0 35px;
					// opacity: 0;
					transition: all 0.3s;
					padding: 0 12px;
					font-size: var(--font-size-medium);
					caret-color: var(--click-hover);
				}

				.show {
					transform: translateX(0);
				}

				.hidden {
					transform: translateX(100%);
				}
			}
		}
	}

	.main-menu {
		padding: 0 10px;

		.menu-grid {
			display: flex;
			flex-wrap: wrap;
			margin: 5px 0;
			border-radius: 15px;

			.menu-grid-item {
				width: 80px;
				height: 80px;
				position: relative;
				box-sizing: border-box;
				padding: 5px;
				color: var(--text-dark);

				.item-view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					background: var(--white);
					border-radius: 5px;
				}
			}
		}
	}

	.waterfall {
		display: flex;
		align-items: flex-start;

		.waterfall-column {
			box-sizing: border-box;
			flex: 1;
			padding: 0 10rpx;
			width: 0;

			.waterfall-item {
				margin-bottom: 10rpx;

				.waterfall-goods {
					display: inline-block;
					width: 100%;
					box-sizing: border-box;
					padding: 10px;
					margin-top: 5px;
					// margin-bottom: -5px;
					background: var(--white);
					border-radius: 15px;

					image {
						border-radius: 10px;
						width: 100%;
					}

					// 商品详细介绍
					.waterfall-goods-item {
						.title {
							margin: 6px 0;
							// margin-left: 1em;
							display: inline-block;
							font-size: var(--font-size-default);
							font-weight: var(--font-weight-blod);
							color: var(--text-orange);

						}

						.desc {
							// text-indent: 1em;
							font-size: var(--font-size-small);
							color: var(--text-light);
						}

						.price {
							display: inline-block;
							margin: 6px 0;
							font-size: var(--font-size-default);
							color: var(--red);

							&:before {
								content: "￥";
							}

							&:after {
								content: "元";
							}
						}
					}
				}
			}
		}
	}

	.more-btn {
		padding: 10px;
	}
</style>